<div style="margin:10px">

      
      
        <div id="form_create" class="div_form" >
                <h1>Create new device:</h1>

                        <a href="index.php?m=manage_device">Devices list</a> | Create new device

            
        <p id="status1" style="font-size: 18px; color: red;"></p>
        <form class="form" >
            <table>
                <tr>
                    <td>Device name(*):</td>
                    <td><input type="text" id="device_name" class="input_form"/></td>
                    <td>Deliver date:</td>
                    <td><span><input type="text" id="datepicker1" class="input_form"></span></td>
                </tr>
                <tr>
                    <td>Part number:</td>
                    <td><input type="text" id="part_number" class="input_form"/></td>
                    <td>Warranty to date:</td>
                    <td><span><input type="text" id="datepicker2" class="input_form"></span></td>
                </tr>
                <tr>
                    <td>Serial number:</td>
                    <td><input type="text" id="serial_number" class="input_form"/></td>
                    <td>Provided by:</td>
                    <td><input type="text" id="provided_by" class="input_form"/></td>
                </tr>
                <tr>
                    <td>Device type(*):</td>
                    <td><select name="device_type" id="device_type">
                        <option value="0">- Select type - </option>
                        <?foreach($structure as $c) :?>
                        <?
                        $id=$c['id']; $sep=str_repeat("&nbsp;&nbsp;&nbsp;",($c['level']))."|__";
                        $selected = ($id==$data['category_id'])? 'selected' : '';
                        ?>
                        <option value="<?=$id?>"  <?=$selected?>><?=$sep?><?=$categories[$id]['name']?></option>
                        <?endforeach?>
                        </select></td>
                    <td>For customer(*):</td>
                    <td>
                        <select id="device_customer">
                            <option value="0">- Select -</option>
                            <?foreach($posts as $p):?>
                            <option value="<?=$p['idcustomers']?>"><?=$p['namecustomer']?></option>
                            <?endforeach?>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Detail(*):</td>
                    <td></td>

                </tr>
                
            </table>
            <table>
                <tr>
                    <td ><textarea id="detail" style="width:100%;height: 200px;"></textarea></td>

                </tr>
            </table>
            
            <p style="margin-left: 100px"><input type="button" value="Save" onclick="Save()" class="button"> <input type="button" value="Reset" onclick="reset()" class="button"/> <br/></p>
            <div id="sending" style="margin-left: 20px;">
            <img src="../images/loading.gif" id="loading">
            </div>
        </form>
        </div>
</div>

<script type="text/javascript" src="<?=WEBSITE_URL?>/js/jquery.ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="<?=WEBSITE_URL?>/js/jquery.ui/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="<?=WEBSITE_URL?>/js/jquery.ui/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript" src="<?=WEBSITE_URL?>/js/jquery.ui/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="<?=WEBSITE_URL?>/js/jquery.ui/jquery-ui-sliderAccess.js"></script>
<script>
$(document).ready(function() {
    $('#sending').hide();
});  

$(function() {
        $( "#datepicker1" ).datepicker();
        $( "#datepicker2" ).datepicker();
        //$('#datepicker').datetimepicker();
});

function reset(){
    $('#device_name').val('');
    $('#datepicker1').val('');
    $('#datepicker2').val('');
    $('#part_number').val('');
    $('#serial_number').val('');
    $('#detail').val('');
    $('#provided_by').val('');
}
function Save(){

    var device_name=$('#device_name').val();

    var deliver_date=$('#datepicker1').val();
    
    var part_number=$('#part_number').val();
    var warranty_todate=$('#datepicker2').val();
    var serial_number=$('#serial_number').val();
    var detail=$('#detail').val();
    var provided_by=$('#provided_by').val();
    var device_type=$('#device_type').val();
    var device_customer=$('#device_customer').val();
    //alert(c_name);
    if((device_name=="")||(detail=="")||(device_type==0)||(device_customer==0)){ 
        $('#status1').html("Please fill in the field require (*)");
    }else{
        //if(confirm('Bạn đã kiểm tra kỹ nội dung rồi chứ?')){
        $('#sending').show();
        //$('#send').hide();
        
        $.ajax({
          url: '<?=WEBSITE_URL?>/ajax.php',
          data: { m: 'manage_device', a:'create',device_name:device_name, deliver_date:deliver_date, part_number:part_number, 
              warranty_todate:warranty_todate,serial_number:serial_number, detail:detail, provided_by:provided_by,
          device_type:device_type,device_customer:device_customer},
          dataType:'json',
          success: function(data) {
            if (!data.success) {
                $("#status1").html('Create device failed!');
               //alert(data.error);
               return false;

            }else{
                //$('#noidung_tin').html('Đã lưu');
                $("#status1").html('Create success');
                $('#sending').hide();
                //$('#send').hide();
                
            }
            //Update info
          } 
         
        });
        
    }

}



</script>
<style>
    table{
        width: 100%;
        margin: 10px;
        
    }
td
{
padding:3px;

text-align: right;
}
</style>